<script setup lang="ts">
import { computed } from 'vue'

defineOptions({
  name: 'SvgIcon'
})

const props = defineProps({
  // 图标名称
  name: {
    type: String,
    required: true
  },
  // 图标颜色
  color: {
    type: String,
    default: ''
  },
  // 图标大小
  size: {
    type: [Number, String],
    default: 16
  },
  // 是否旋转
  spin: {
    type: Boolean,
    default: false
  },
  // 自定义类名
  className: {
    type: String,
    default: ''
  }
})

// 计算图标样式
const iconStyle = computed(() => {
  const style: Record<string, string> = {}
  if (props.size) {
    style.width = `${props.size}px`
    style.height = `${props.size}px`
  }
  if (props.color) {
    style.color = props.color
  }
  return style
})

// 计算图标类名
const iconClass = computed(() => {
  return [
    'svg-icon',
    props.className,
    { 'svg-icon-spin': props.spin }
  ]
})

// 图标ID
const symbolId = computed(() => {
  return `#icon-${props.name}`
})
</script>

<template>
  <svg :class="iconClass" :style="iconStyle" aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-icon-spin {
  animation: svg-icon-spin 1s linear infinite;
}

@keyframes svg-icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 